```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>软通动力自动驾驶小巴HMI项目甘特图</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        svg {
            border: 1px solid #ccc;
            background: #f9f9f9;
        }
        .legend {
            margin-top: 20px;
            padding: 10px;
            background: #eee;
            border-radius: 5px;
        }
        .milestone {
            fill: #FFD700;
            stroke: #FFA500;
            stroke-width: 2;
        }
        .task-bar {
            fill: #4CAF50;
            stroke: #45a049;
            stroke-width: 1;
        }
        .critical-bar {
            fill: #f44336;
            stroke: #da190b;
            stroke-width: 2;
        }
        .dependency {
            stroke: #999;
            stroke-width: 1;
            marker-end: url(#arrowhead);
        }
        text {
            font-size: 12px;
            fill: #333;
        }
        .task-label {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>软通动力自动驾驶小巴HMI开发项目甘特图</h1>
    <p>此甘特图基于项目实施计划，显示关键任务的进度、依赖关系和里程碑。时间轴从2025-09-09开始，单位为天。关键路径以红色高亮。依赖关系用虚线箭头表示。</p>
    
    <svg width="1200" height="600" viewBox="0 0 1200 600">
        <!-- 定义箭头标记 -->
        <defs>
            <marker id="arrowhead" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
                <polygon points="0 0, 10 3.5, 0 7" fill="#999" />
            </marker>
        </defs>
        
        <!-- 时间轴背景 -->
        <rect x="100" y="0" width="1000" height="40" fill="#e0e0e0" />
        <text x="100" y="20" font-size="14" font-weight="bold">时间轴 (天)</text>
        
        <!-- 时间轴标签 (简化，每10天一个标记) -->
        <g>
            <line x1="100" y1="40" x2="1100" y2="40" stroke="#333" stroke-width="1" />
            <text x="100" y="60" font-size="10">0 (09-09)</text>
            <text x="200" y="60" font-size="10">10</text>
            <text x="300" y="60" font-size="10">20</text>
            <text x="400" y="60" font-size="10">30</text>
            <text x="500" y="60" font-size="10">40</text>
            <text x="600" y="60" font-size="10">50</text>
            <text x="700" y="60" font-size="10">60</text>
            <text x="800" y="60" font-size="10">70</text>
            <text x="900" y="60" font-size="10">80</text>
            <text x="1000" y="60" font-size="10">90</text>
            <text x="1100" y="60" font-size="10">100+</text>
        </g>
        
        <!-- Y轴标签 (任务组) -->
        <text x="50" y="100" class="task-label">1.0 启动/需求</text>
        <text x="50" y="130" class="task-label">1.1 需求收集</text>
        <text x="50" y="150" class="task-label">1.2 可行性评估</text>
        <text x="50" y="190" class="task-label">2.0 设计</text>
        <text x="50" y="220" class="task-label">2.1 架构设计</text>
        <text x="50" y="240" class="task-label">2.2 UI/UX设计</text>
        <text x="50" y="280" class="task-label">3.0 开发</text>
        <text x="50" y="310" class="task-label">3.1 初始化模块</text>
        <text x="50" y="330" class="task-label">3.2 界面模块</text>
        <text x="50" y="350" class="task-label">3.3 行驶界面</text>
        <text x="50" y="370" class="task-label">3.4 三维场景 (关键)</text>
        <text x="50" y="410" class="task-label">4.0 测试</text>
        <text x="50" y="440" class="task-label">4.1 单元/集成</text>
        <text x="50" y="460" class="task-label">4.2 系统/性能</text>
        <text x="50" y="480" class="task-label">4.3 UAT/验收</text>
        <text x="50" y="520" class="task-label">5.0 部署/收尾</text>
        <text x="50" y="550" class="task-label">5.1 部署</text>
        <text x="50" y="570" class="task-label">5.2 收尾</text>
        
        <!-- 任务条 (位置基于天数: x=100 + 天数*10, 高度10px, 宽度=持续天*10) -->
        <!-- 1.1: 0-15d -->
        <rect x="100" y="120" width="150" height="10" class="task-bar" />
        <text x="105" y="128" font-size="8">15d</text>
        
        <!-- 1.2: 15-30d -->
        <rect x="250" y="140" width="150" height="10" class="task-bar" />
        <text x="255" y="148" font-size="8">15d</text>
        
        <!-- 2.1: 15-35d (09-24=15d start, 20d) -->
        <rect x="250" y="210" width="200" height="10" class="task-bar" />
        <text x="255" y="218" font-size="8">20d</text>
        
        <!-- 2.2: 30-50d -->
        <rect x="400" y="230" width="200" height="10" class="task-bar" />
        <text x="405" y="238" font-size="8">20d</text>
        
        <!-- 3.1: 35-45d -->
        <rect x="450" y="300" width="100" height="10" class="task-bar" />
        <text x="455" y="308" font-size="8">10d</text>
        
        <!-- 3.2: 50-80d -->
        <rect x="600" y="320" width="300" height="10" class="task-bar" />
        <text x="605" y="328" font-size="8">30d</text>
        
        <!-- 3.3: 80-100d -->
        <rect x="900" y="340" width="200" height="10" class="task-bar" />
        <text x="905" y="348" font-size="8">20d</text>
        
        <!-- 3.4: 45-85d (关键路径) -->
        <rect x="550" y="360" width="400" height="10" class="critical-bar" />
        <text x="555" y="368" font-size="8">40d (关键)</text>
        
        <!-- 4.1: 85-105d -->
        <rect x="950" y="430" width="200" height="10" class="task-bar" />
        <text x="955" y="438" font-size="8">20d</text>
        
        <!-- 4.2: 105-125d -->
        <rect x="1050" y="450" width="200" height="10" class="task-bar" />
        <text x="1055" y="458" font-size="8">20d</text>
        
        <!-- 4.3: 125-140d -->
        <rect x="1100" y="470" width="150" height="10" task-bar" />
        <text x="1105" y="478" font-size="8">15d</text>
        
        <!-- 5.1: 140-150d -->
        <rect x="1100" y="540" width="100" height="10" class="task-bar" />
        <text x="1105" y="548" font-size="8">10d</text>
        
        <!-- 5.2: 150-155d -->
        <rect x="1150" y="560" width="50" height="10" class="task-bar" />
        <text x="1155" y="568" font-size="8">5d</text>
        
        <!-- 里程碑 (菱形) -->
        <!-- M1: 需求冻结 30d -->
        <polygon points="300,120" class="milestone" points="290,110 300,120 290,130 300,140" fill="#FFD700" stroke="#FFA500" />
        <text x="285" y="155" font-size="8">M1: 需求冻结</text>
        
        <!-- M2: 设计审查 50d -->
        <polygon points="500,210" points="490,200 500,210 490,220 500,230" class="milestone" />
        <text x="485" y="255" font-size="8">M2: 设计审查</text>
        
        <!-- M3: 开发集成 100d (approx after 3.4) -->
        <polygon points="1000,360" points="990,350 1000,360 990,370 1000,380" class="milestone" />
        <text x="985" y="405" font-size="8">M3: 开发集成</text>
        
        <!-- M4: 测试通过 140d -->
        <polygon points="1100,470" points="1090,460 1100,470 1090,480 1100,490" class="milestone" />
        <text x="1085" y="515" font-size="8">M4: 测试通过</text>
        
        <!-- M5: 项目交付 155d -->
        <polygon points="1150,560" points="1140,550 1150,560 1140,570 1150,580" class="milestone" />
        <text x="1135" y="605" font-size="8">M5: 项目交付</text>
        
        <!-- 依赖箭头示例 (1.2 -> 2.2, 2.1 -> 3.1, 3.4 -> 4.1 等) -->
        <line x1="400" y1="145" x2="400" y2="225" class="dependency" />
        <line x1="450" y1="220" x2="450" y2="295" class="dependency" />
        <line x="950" y1="370" x2="950" y2="435" class="dependency" />
        <polyline points="950,370 950,435" class="dependency" />
    </svg>
    
    <div class="legend">
        <h3>图例</h3>
        <ul>
            <li><span style="display:inline-block; width:20px; height:10px; background:#4CAF50; border:1px solid #45a049;"></span> 普通任务</li>
            <li><span style="display:inline-block; width:20px; height:10px; background:#f44336; border:2px solid #da190b;"></span> 关键路径任务</li>
            <li><span style="display:inline-block; width:10px; height:10px; background:#FFD700; border:2px solid #FFA500;"></span> 里程碑</li>
            <li><span style="display:inline-block; width:20px; height:1px; background:#999;"></span> 依赖关系 (箭头)</li>
        </ul>
        <p>注：时间轴简化，每格10天。实际日期基于2025-09-09起始。总周期约155天 (5个月)。</p>
    </div>
    
    <script>
        // 可选：添加交互 (hover 提示)
        const bars = document.querySelectorAll('.task-bar, .critical-bar');
        bars.forEach(bar => {
            bar.addEventListener('mouseover', function() {
                this.style.opacity = 0.7;
                // 可以添加 tooltip
            });
            bar.addEventListener('mouseout', function() {
                this.style.opacity = 1;
            });
        });
    </script>
</body>
</html>
```